<template>
  <div class="list">
    <div class="head">
      <div class="id">用户ID</div>
      <div class="username">用户名</div>
      <div class="nickname">昵称</div>
      <div class="createdate">注册日期</div>
      <div class="handle">操作</div>
    </div>
    <div v-for="(item, index) in userList" :key="index" class="user">
      <div class="up">
        <!-- 下拉详情按钮 -->
        <div class="icon" @click="isClick(index)">
          <i class="el-icon-arrow-down" v-if="look[index].show"></i>
          <i class="el-icon-arrow-right" v-else></i>
        </div>
        <div class="info">
          <div class="id">{{ item.id }}</div>
          <div class="username">{{ item.username }}</div>
          <div class="nickname">{{ item.nickname }}</div>
          <div class="createdate">{{ item.createTime }}</div>
          <el-button type="danger" class="handle" @click="deleteClick(item)">删除</el-button>
        </div>
      </div>
      <div class="down" v-show="look[index].show">
        <!--  -->
        <div class="left">
          <div class="username">用户名：{{ item.username }}</div>
          <div class="password">
            密码：<span @click="passwordClick(item)">编辑密码</span>
          </div>

          <div>性别：{{ item.gender }}</div>
          <div>个人简介：{{ item.info }}</div>
          <div class="avatar">
            头像：<span @click="checkAvatar(item)">查看</span>
          </div>
        </div>
        <div class="right">
          <div>昵称：{{ item.nickname }}</div>
          <div>邮箱：{{ item.email }}</div>
          <div>生日：{{ item.birthday }}</div>
          <div>更新时间：{{ item.updateTime }}</div>
        </div>
      </div>
    </div>
    <!-- 编辑密码对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
      请输入新密码
      <el-input type="text" v-model="newPassword"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog1Cancel()">取 消</el-button>
        <el-button type="primary" @click="updatePassword()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看头像 -->
    <el-dialog title="查看头像" :visible.sync="dialogVisible2" width="340px">
      <img id="avatar" class="avatar" :src="src" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { UserList, updateUserNewPassword } from "@/api/manager";
import {deleteUser} from "@/api/user"
export default {
  data() {
    return {
      userList: {},
      look: [],
      dialogVisible1: false,
      dialogVisible2: false,
      newPassword: "",
      src: "",
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    // 获取用户列表
    getUserList() {
      UserList().then((res) => {
        res.msg = "userList";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].createTime = this.formatDate1(res.data[i].createTime);
          res.data[i].updateTime = this.formatDate1(res.data[i].updateTime);
          res.data[i].birthday = this.formatDate2(res.data[i].birthday);
          this.look.push(Object.assign({}, i, { show: false }));
        }
        // console.log(res);

        this.userList = res.data;
      });
    },

    // 下拉详情
    isClick(index) {
      // console.log(index);
      // console.log(this.look);
      this.look[index].show = !this.look[index].show;
    },
    // 删除按钮
    deleteClick(item){
      deleteUser(item.id).then((res)=>{
        // console.log(res)
          this.$message.success("删除成功！")
      })
      setTimeout(() => {
        this.getUserList()
      }, 100);

    },

    // 编辑密码按钮
    passwordClick(item) {
      localStorage.setItem("suid", item.id);
      this.dialogVisible1 = true;
    },
    // 编辑密码取消
    dialog1Cancel() {
      this.dialogVisible1 = false;
      this.newPassword = "";
      localStorage.removeItem("suid");
    },
    // 提交新密码
    updatePassword() {
      const data = {
        id: localStorage.getItem("suid"),
        newPassword: this.newPassword,
      };
      updateUserNewPassword(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
        }
        // console.log(res);
        this.dialogVisible1 = false;
        this.newPassword = "";
        localStorage.removeItem("suid");
      });
    },
    // 查看头像
    checkAvatar(item) {
      this.dialogVisible2 = true;
      // console.log(item.avatar);
      // console.log(document.getElementById("avatar"));
      this.src = item.avatar;
    },

    // 日期格式化
    formatDate1(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
    // 日期格式化 年月日
    formatDate2(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
.list {
  width: 1100px;
  height: 850px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  .avatar {
    width: 300px;
  }
  .head {
    position: relative;
    height: 50px;
    border-bottom: 1px solid #000;
    div {
      font-size: 20px;
      float: left;
      color: rgb(85, 85, 85);
      font-weight: bold;
      padding-top: 15px;
    }
    .id {
      position: absolute;
      left: 50px;
      width: 80px;
    }
    .username {
      position: absolute;
      left: 200px;
    }
    .nickname {
      position: absolute;
      left: 350px;
    }
    .createdate {
      position: absolute;
      left: 550px;
    }
    .handle {
      position: absolute;
      left: 850px;
    }
  }
  .user {
    width: 1100px;
    height: auto;
    float: left;
    // border-bottom: 1px solid #000;

    .up {
      width: 1100px;
      height: 50px;
      border-bottom: 1px solid #000;
      .icon {
        cursor: pointer;
        float: left;
        padding: 13px 15px;
      }
      .info {
        position: relative;
        div {
          float: left;
          padding: 12px 0;
        }
        .id {
          position: absolute;
          left: 75px;
          width: 80px;
        }
        .username {
          position: absolute;
          left: 200px;
        }
        .nickname {
          position: absolute;
          left: 350px;
        }
        .createdate {
          position: absolute;
          left: 550px;
        }
        .handle {
          position: absolute;
          left: 850px;
          top: 5px;
        }
      }
    }
    .down {
      width: 1100px;
      height: 225px;
      border-bottom: 1px solid #000;
      position: relative;
      .left {
        position: absolute;
        left: 50px;
        float: left;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
        .password {
          span {
            cursor: pointer;
            color: #409eff;
          }
        }
        .avatar {
          span {
            cursor: pointer;
            color: #409eff;
          }
        }
      }
      .right {
        float: left;
        position: absolute;
        left: 500px;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
      }
    }
  }
}
</style>